<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>alertify.js - example page</title>
<link rel="stylesheet" href="../themes/alertify.core.css" />
<link rel="stylesheet" href="../themes/alertify.default.css" id="toggleCSS" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../lib/alertify.min.js"></script>
<meta name="viewport" content="width=device-width">
<style>
.alertify-log-custom {
	background: blue;
}
</style>
</head>
<body>
    <h2>Dialogs</h2>
    <a href="#" id="alert">Alert Dialog</a>
    <br>
    <a href="#" id="confirm">Confirm Dialog</a>
    <br>
    <a href="#" id="prompt">Prompt Dialog</a>
    <br>
    <a href="#" id="labels">Custom Labels</a>
    <br>
    <a href="#" id="focus">Button Focus</a>
    <br>
    <a href="#" id="order">Button Order</a>
    <h2>Ajax</h2>
    <a href="#" id="ajax">Ajax - Multiple Dialog</a>
    <h2>Logs</h2>
    <a href="#" id="notification">Standard Log</a>
    <br>
    <a href="#" id="success">Success Log</a>
    <br>
    <a href="#" id="error">Error Log</a>
    <br>
    <a href="#" id="custom">Custom Log</a>
    <br>
    <a href="#" id="delay">Hide in 10 seconds</a>
    <br>
    <a href="#" id="forever">Persistent Log</a>
    <script>
                    function reset() {
                        $("#toggleCSS").attr("href", "../themes/alertify.default.css");
                        alertify.set({
                            labels : {
                                ok : "OK",
                                cancel : "Cancel"
                            },
                            delay : 5000,
                            buttonReverse : false,
                            buttonFocus : "ok"
                        });
                    }

                    // ==============================
                    // Standard Dialogs
                    $("#alert").on('click', function() {
                        reset();
                        alertify.alert("This is an alert dialog");
                        return false;
                    });

                    $("#confirm").on('click', function() {
                        reset();
                        alertify.confirm("确认删除数据?", function(e) {
                            if (e) {
                                alertify.success("删除成功!");
                            } else {
                                alertify.error("删除失败!");
                            }
                        });
                        return false;
                    });

                    $("#prompt").on('click', function() {
                        reset();
                        alertify.prompt("This is a prompt dialog", function(e, str) {
                            if (e) {
                                alertify.success("You've clicked OK and typed: " + str);
                            } else {
                                alertify.error("You've clicked Cancel");
                            }
                        }, "Default Value");
                        return false;
                    });

                    // ==============================
                    // Ajax
                    $("#ajax").on("click", function() {
                        reset();
                        alertify.confirm("Confirm?", function(e) {
                            if (e) {
                                alertify.alert("Successful AJAX after OK");
                            } else {
                                alertify.alert("Successful AJAX after Cancel");
                            }
                        });
                    });

                    // ==============================
                    // Standard Dialogs
                    $("#notification").on('click', function() {
                        reset();
                        alertify.log("Standard log message");
                        return false;
                    });

                    $("#success").on('click', function() {
                        reset();
                        alertify.success("Success log message");
                        return false;
                    });

                    $("#error").on('click', function() {
                        reset();
                        alertify.error("Error log message");
                        return false;
                    });

                    // ==============================
                    // Custom Properties
                    $("#delay").on('click', function() {
                        reset();
                        alertify.set({
                            delay : 10000
                        });
                        alertify.log("Hiding in 10 seconds");
                        return false;
                    });

                    $("#forever").on('click', function() {
                        reset();
                        alertify.log("Will stay until clicked", "", 0);
                        return false;
                    });

                    $("#labels").on('click', function() {
                        reset();
                        alertify.set({
                            labels : {
                                ok : "Accept",
                                cancel : "Deny"
                            }
                        });
                        alertify.confirm("Confirm dialog with custom button labels", function(e) {
                            if (e) {
                                alertify.success("You've clicked OK");
                            } else {
                                alertify.error("You've clicked Cancel");
                            }
                        });
                        return false;
                    });

                    $("#focus").on('click', function() {
                        reset();
                        alertify.set({
                            buttonFocus : "cancel"
                        });
                        alertify.confirm("Confirm dialog with cancel button focused", function(e) {
                            if (e) {
                                alertify.success("You've clicked OK");
                            } else {
                                alertify.error("You've clicked Cancel");
                            }
                        });
                        return false;
                    });

                    $("#order").on('click', function() {
                        reset();
                        alertify.set({
                            buttonReverse : true
                        });
                        alertify.confirm("Confirm dialog with reversed button order", function(e) {
                            if (e) {
                                alertify.success("You've clicked OK");
                            } else {
                                alertify.error("You've clicked Cancel");
                            }
                        });
                        return false;
                    });

                    // ==============================
                    // Custom Log
                    $("#custom").on('click', function() {
                        reset();
                        alertify.custom = alertify.extend("custom");
                        alertify.custom("I'm a custom log message");
                        return false;
                    });
                </script>
</body>
</html>